<template>
    <div class="userCotent">
                <div class="basicInfo">
                    <div>
                        <div class="box"><span style="float:left;color:#999;">基本信息</span>
                        <span>药品通用名称：</span></div>
                        <div><input type="text" style="width:320px;" disabled v-model='drugName'></div>
                    </div>
                     <div>
                        <div class="box"><span>药品有效期：</span></div>
                        <div><input type="text" disabled v-model='expiryDate'></div>
                    </div>
                    <div>
                        <div class="box"><span>剂型：</span></div>
                        <div><input type="text" disabled v-model='dosageForm'></div>
                    </div>
                     <div>
                        <div class="box"><span>批准文号：</span></div>
                        <div><input type="text" disabled v-model='approvalNumber'></div>
                    </div>
                    <div>
                        <div class="box"><span>批准文号有效期：</span></div>
                        <div class="date"><input type="text" disabled v-model='approvalNumStaTime'>至<input type="text" disabled v-model='approvalNumEndTime'></div>
                    </div>
                 
                </div>
                <div class="basicInfo pillrule">
                    <div>
                        <div class="box"><span style="float:left;color:#999;">药品规格</span>
                        <span>最小赋码包装单位：</span></div>
                        <div><input type="text" style="width:320px;" disabled v-model='minPackagingUnit'></div>
                    </div>
                    <div>
                        <div class="box"><span>最小赋码包装内置剂数量：</span></div>
                        <div><input type="text" disabled v-model='minPackagingNumber'></div>
                    </div>
                     <div>
                        <div class="box"><span>制剂单位：</span></div>
                        <div><input type="text" disabled v-model='specificationUnit'></div>
                    </div>
                     <div>
                        <div class="box"><span>制剂规格：</span></div>
                        <div><input type="text" disabled v-model='specificationNumber'></div>
                    </div>
                     <div>
                        <div class="box"><span>包装级别：</span></div>
                        <div><input type="text" disabled v-model='packingLevel'></div>
                    </div>
                     <div>
                        <div class="box"><span>药品本位码：</span></div>
                        <div><input type="text" disabled v-model='drugCode'></div>
                    </div>
                </div>

    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        data() {
            return {
                drugName: '',
                dosageForm: '',
                approvalNumber: '',
                approvalNumStaTime: '',
                approvalNumEndTime: '',
                minPackagingUnit: '',
                minPackagingNumber: '',
                specificationUnit: '',
                specificationNumber: '',
                packingLevel: '',
                drugCode: '',
                expiryDate: '',
                id: this.$store.state.stockManage.id
            }
        },
        filters: {

        },
        created: function() {
            this.getMedicineInfo();
        },
        methods: {
            // 格式化日期
            formatDate(date) {
                if (date == null || date == '' || date == undefined) {
                    return '';
                } else {
                    let y, m, d, h, i, s,
                        t = new Date(parseInt(date));
                    y = t.getFullYear()
                    m = t.getMonth() + 1
                    d = t.getDate()
                    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
                }
            },
            getMedicineInfo: function() {
                this.$store.commit('showLoading');
                this.getMedicinelDetailInfo({
                    id: this.id
                }).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code == 200) {
                        let drugInfo = data.data.drugInfo;
                        this.drugName = drugInfo.drugName;
                        this.expiryDate = this.formExpiryDate(drugInfo.drugIndate,drugInfo.drugIndateUnit)
                        this.dosageForm = drugInfo.dosageForm;
                        this.approvalNumber = drugInfo.approvalNumber;
                        this.approvalNumStaTime = this.formatDate(drugInfo.approvalNumStaTime);
                        this.approvalNumEndTime = this.formatDate(drugInfo.approvalNumEndTime);
                        this.minPackagingUnit = this.formMinUnit(drugInfo.minPackagingUnit);
                        this.minPackagingNumber = drugInfo.minPackagingNumber;
                        this.specificationUnit = this.formSpecificationUnit(drugInfo.specificationUnit);
                        this.specificationNumber = drugInfo.specificationNumber;
                        this.packingLevel = drugInfo.packingLevel;
                        this.drugCode = drugInfo.drugCode;
                    } else {
                        this.$message(data.message);
                    }
                }).catch(msg => console.log(msg))
            },
            formExpiryDate(o,t) {
                let p,h;
                if (o == null || o == undefined) {
                    p = '-';
                }else{
                    p = o;
                }
                if (t == null || t == undefined) {
                    h = '-';
                }else if(t == 'year'){
                    h = '年';
                }else if(t == 'month'){
                    h = '月';
                }else if(t == 'day'){
                    h = '日';
                }
                return String(p) + String(h);
            },
            formMinUnit(o){
                if(o =='1'){
                    return '盒';
                }else if(o == '2'){
                    return '袋';
                }else if(o == '3'){
                    return '箱';
                }
            },
            formSpecificationUnit(o){
                if(o =='1'){
                    return '片';
                }else if(o == '2'){
                    return '袋';
                }else if(o == '3'){
                    return '粒';
                }else if(o == '4'){
                    return '瓶';
                }else if(o == '5'){
                    return '支';
                }
            },
            ...mapActions(['getMedicinelDetailInfo'])
        }
    }

</script>
<style scoped>
    .userCotent {
        margin-top: 10px;
        background: #fff;
        height: calc(100vh - 150px);
        overflow-x: hidden;
    }
    
    .userCotent>div {
        padding: 30px 0 30px 40px;
        border-bottom: 1px solid #DDD;
    }
    
    .userCotent>div:nth-child(2) {
        border-bottom: none;
    }
    
    .userCotent>div>div>div {
        float: left;
        padding-left: 40px;
    }
    
    .userCotent input {
        width: 160px;
        height: 32px;
        border: 1px solid #DDD;
        border-radius: 5px;
        background-color: #fff;
        padding-left: 10px;
    }
    
    .userNav>div:nth-child(1) {
        height: 25px;
        display: flex;
        margin-left: 35px;
        align-items: center;
    }
    
    .userNav>div:nth-child(1) input {
        background: #43dce7;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        margin-left: 60px;
        width: 80px;
        height: 32px;
    }
    
    .userNav>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT {
        width: 360px;
        display: flex;
        align-items: center;
        margin-right: 45px;
    }
    
    .userNavT>div:nth-child(1) {
        display: flex;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        height: 34px;
        padding: 5px 10px;
        width: 360px;
        justify-content: space-between;
    }
    
    .userNavT>div:nth-child(1) input {
        border: none;
        outline: none;
        width: 100%;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT>div:nth-child(1) img {
        width: 20px;
        height: 20px;
    }
    
    .userNavT>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    
    .userNavT>div:nth-child(1) div span {
        padding: 0!important;
    }
    
    .userNavT>div:nth-child(2) {
        color: #888;
        font-size: 14px;
        cursor: pointer;
    }
    
    input {
        font-size: 14px
    }
    
    .datails {
        border: 1px solid #dddddd;
        width: 100%;
        background: #fff;
        min-width: 1289px;
    }
    
    .basicInfo>div {
        margin: 20px 0;
        overflow: hidden;
    }
    
    .box {
        width: 280px;
        height: 32px;
        line-height: 32px;
    }
    
    .box span {
        float: right;
        color: #333;
    }
    
    .box input {
        padding: 0 5px;
        margin-left: 40px;
    }
    
    .date input {
        width: 140px;
    }
    
    .date input:nth-child(1) {
        margin-right: 10px;
    }
    
    .date input:nth-child(2) {
        margin-left: 10px;
    }

</style>
